<template>
  <div id="lsd">
    <!--<div id="left_side_btn" @click="openDrawer">

    </div>-->
    <div class="appRef" ref="appRef">
      <Header1/>
      <!--<div class="cont flex mt-24">-->
      <div class="cont flex mt-5">
        <Control ref="childControl"/>
        <!--<Right />-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useDraw from '@/hooks/web/useDraw'
import {onMounted, onUnmounted, ref} from 'vue'
import Header1 from './components/header.vue'
import Control from './components/control.vue'
// * 适配处理
const {appRef, calcRate, windowDraw, unWindowDraw} = useDraw()
// 生命周期
onMounted(() => {
  // todo 屏幕适应
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
})
// const childControl = ref()
// const openDrawer = (() => {
//     childControl.value.drawer.value = true
// })
</script>

<style scoped lang="less">
#lsd {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/imgs/lsd-bj.png');
  background-size: cover;
  background-position: center center;
  background-color: #000;
}

.appRef {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;

  .cont {
    padding: 0 20px;
    box-sizing: border-box;
  }
}

#left_side_btn {
  padding-top: 45px;
  width: 10px;
  height: 100px;
  position: absolute;
  top: 40%;
  background-color: #000;
  z-index: 9999;
  border: 1px solid #00a991;
  border-radius: 5px;
}
</style>
